<!-- 移动签批->公文详情->收文->收文详情 -->
<!-- 收文管理->收文详情 -->
<template>
  <view>
    <view class="content">
      <view class="title">
        【传阅】{{ circuTitle }}
      </view>
      <view class="form-border" style="box-sizing: border-box;">
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>传阅人员</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <view v-for="(dept,index) in deptArr" style="padding: 5px 0px 5px 0px">
                <span v-if="nameArr != null && nameArr.length > 0">
                  {{ dept }}：{{ nameArr[index] }}
                </span>
            </view>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>传阅意见</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <template v-if="opinArr != null && opinArr != undefined">
              <view v-for="item in opinArr">
                <view style="padding: 5px;">{{ item.opinion }}</view>
                <view class="opinion flex-block-end">
                  <!-- base64签名图片 -->
                  <span>{{ item.userName }}</span>
                  <span> {{ item.approvalTime }}</span>
                </view>
              </view>
            </template>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>传阅公文</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <span @click="toDetail" class="font-blue">{{ circuTitle }}</span>
          </view>
        </view>
      </view>
    </view>
    <records @refreshBtnGroup="refreshBtnGroup" :showRecords="showRecords" @closeRecords="closeRecords"
             :paramObject="paramObject"></records>
    <cy ref="cy" @refreshBtnGroup="refreshBtnGroup" :showCy="showCy" @closeCy="closeCy" :paramObject="paramObject"
        :gwTitle="circuTitle"></cy>

    <div style="height: 5rem;">
      <van-tabbar v-model="active">
        <van-tabbar-item v-for="(item,index) in barList" :key="index" v-if="index < 5" :name="item.name" @click="onClick(item.operation)">
          <span>{{item.value}}</span>
          <template #icon="props">
            <img :src="props.active ? item.iconTab.active : item.iconTab.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </view>
</template>

<script>
import records from 'pages/caac/components/cydDoc/compo-records';
import cy from 'pages/caac/components/cydDoc/compo-cy';

export default {
  components: {
    records,
    cy,
  },
  onLoad: async function (option) {
    await this.$onLaunched //解決bug：执行完onLaunch后再执行页面onLoad
    // 从缓存获取用户信息
    this.userInfo = this.cache.get('userInfo')
    // 从地址栏获取proInstId
    this.proInstId = option.proInstId
    this.from = option.from
    if (this.proInstId != undefined && this.proInstId != '') {
      await this.openwfneededdata('', this.proInstId)
      await this.readCirculate(this.proInstId)
      await this.getCirculate(this.proInstId)
      await this.getCirculateOpinion(this.proInstId)
      this.showDeleteOpinionBtn()
    }
  },

  data() {
    return {
      circuTitle: '',   // 标题
      deptArr: [],  // 部门
      nameArr: [],  // 人员
      opinArr: [],  // 意见
      proInstId: '',
      configCode: '',
      userInfo: {},		 // 当前登录用户信息，目前先从缓存中获取
      paramObject: {}, // openwfneededdata数据
      optionBtn: null, //
      buttonArr:[
        {
          name: '填写意见',
          operation: 'addCirculateReviews',
          icon: 'static/imgs/icon/icon-opinion.png',
          iconTab: {
            active: 'static/imgs/icon/icon-opinion-active.png',
            inactive: 'static/imgs/icon/icon-opinion.png'
          },
          value: '填写意见',
          sort: 1
        },

        {
          name: '已阅',
          operation: 'review_YiYue_circulate',
          icon: 'static/imgs/icon/icon-opinion.png',
          iconTab: {
            active: 'static/imgs/icon/icon-opinion-active.png',
            inactive: 'static/imgs/icon/icon-opinion.png'
          },
          value: '已阅',
          sort: 2
        },
        {
          name: '清除意见',
          operation: 'deleteOpinion',
          icon: 'static/imgs/icon/icon-invalid.png',//供更多操作里的按钮使用，因其icon不能自定义，故给其单独的icon地址
          iconTab: {
            active: 'static/imgs/icon/icon-invalid-active.png',
            inactive: 'static/imgs/icon/icon-invalid.png'
          },
          value: '清除意见',
          sort: 3
        },
        {
          name: '传阅',
          operation: 'circulate',
          icon: 'static/imgs/icon/icon-agree.png',
          iconTab: {
            active: 'static/imgs/icon/icon-agree-active.png',
            inactive: 'static/imgs/icon/icon-agree.png'
          },
          value: '传阅',
          sort: 4
        },
        {
          name: '阅毕',
          operation: 'readalready',
          icon: 'static/imgs/icon/icon-finished.png',
          iconTab: {
            active: 'static/imgs/icon/icon-finished-active.png',
            inactive: 'static/imgs/icon/icon-finished.png'
          },
          value: '阅毕',
          sort: 5
        }

      ],    // 要显示的功能按钮
      showRecords: false, // 填写意见
      showCy: false,      // 传阅按钮
      barList: [],
      showShare: false,     // 更多
      active: '',
      opinionId:'',//需要删除的意见ID
      cydOpinionId:'',//意见id
      from:'',//区别来自电报还是待办文件
    }
  },

  mounted() {
    //处理页面弹出层初始化
    this.active = 'gwxq'
  },

  methods: {
    // 关闭更多操作
    closeShare(item){
      this.showShare = false
      this.btnFunction(item)
    },
    // 传阅情况
    getCirculate(proInstId) {
      const _this = this
      _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/component/workflow/circulatecontroller/quertcirs`),
        method: 'get',
        params: _this.$http.adornParams({
          'systemKey': _this.userInfo.systemKey,
          'systemFlag': _this.userInfo.systemFlag,
          'proInstId': proInstId,
        })
      }).then(({data}) => {
        if (data.code == 200 && data.data.length > 0) {
          let deptNames = []
          data.data.forEach(t => {
            let name = t.receiverDeptName
            if (!deptNames.includes(name)) {
              deptNames.push(t.receiverDeptName)
            }
          })
          let userNames = [], opinions = []
          deptNames.forEach(item => {
            let names = data.data.filter(t => t.receiverDeptName == item)
                .map(m => {
                  return m.receiverName + '[' + m.readStatus + ']'
                }).join('，')
            userNames.push(names)
          })
          _this.deptArr = deptNames
          _this.nameArr = userNames
        }
      })
    },
    // 传阅意见
    getCirculateOpinion(proInstId) {
      const _this = this
      _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/component/approval/circulateApprovalwrite`),
        method: 'get',
        params: _this.$http.adornParams({
          'systemKey': _this.userInfo.systemKey,
          'systemFlag': _this.userInfo.systemFlag,
          'proInstId': proInstId,
        })
      }).then(({data}) => {
        if (data.code == 200) {
          _this.opinArr = data.data.circulateReview
          console.log('opinArr' + JSON.stringify(_this.opinArr))
        }
      })
    },

    // 获取签批功能
    openwfneededdata(id, proInstId) {
      const _this = this
      let actUrl = '/caac/oa/comm/comm/openwfneededdata'
      _this.$http({
        url: _this.$http.adornUrl(actUrl),
        method: 'get',
        params: _this.$http.adornParams({
          'id': id,             // 详情返回的swId
          'proInstId': proInstId, // proInstId
          'systemKey': _this.userInfo.systemKey,
          'systemFlag': _this.userInfo.systemFlag
        })
      }).then(({data}) => {
        if (data.code == 200) {
          _this.paramObject = data.data
          console.log('paramObject--->' + JSON.stringify(_this.paramObject))
          _this.configCode = data.data.configCode
          _this.getCaacDetail(proInstId, data.data.configCode)
          // _this.getRoleTypesAndActInst(data.data.configId,proInstId)
          _this.barList = _this.buttonArr
        }
      })
    },

    // 获取详情
    getCaacDetail(proInstId, configCode) {
      const _this = this
      let detailUrl = '/caac/oa/doc/sw/proInstId/'
      if (configCode == 'jbhlc') {
        detailUrl = '/caac/oa/doc/fw/proInstId/'
      } else if (configCode == 'sj_sw') {
        detailUrl = '/caac/oa/doc/sw/proInstId/'
      } else if (configCode == 'mhjsd') {
        detailUrl = '/caac/oa/doc/sd/proInstId/'
      } else if (configCode == 'mhj_sw_zhu') {
        detailUrl = '/caac/oa/doc/sw/proInstId/'
      }

      _this.$httploading({
        url: _this.$http.adornUrl(detailUrl + proInstId),
        method: 'get',
        params: _this.$http.adornParams({
          'systemKey': _this.userInfo.systemKey,//固定值
          'systemFlag': _this.userInfo.systemFlag//固定值
        })
      }).then(({data}) => {
        console.log("------公文详情-sw: " + JSON.stringify(data));
        if (data.code == 200) {
          _this.circuTitle = data.data.title
        }
      });
    },

    //获取签批功能菜单optionBtn02
    getRoleTypesAndActInst(configId,proInstId){
      var _this = this
      this.$http({
        url: this.$http.adornUrl(`/caac/wfm/ApplicationController/getRoleTypesAndActInst`),
        method: 'post',
        params: this.$http.adornParams({
          'proInstId': proInstId,//发文详情返回的proInstId
          'configId': configId,//openwfneededdata()返回的configId
          'systemKey': this.userInfo.systemKey,//固定值
          'systemFlag': this.userInfo.systemFlag//固定值
        })
      }).then(({data}) => {
        if(data.code==200){
          _this.optionBtn =data.data
          console.log("签批功能菜单optionBtn02: " + JSON.stringify(data.data));
          _this.initActivity()

        }

      })
    },

    // 获取要显示的按钮
    async getButtonsData(proInstId){
      let _this = this
      await _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/app/getButtonsData`),
        method: 'get',
        params: _this.$http.adornParams({
          'systemKey': _this.userInfo.systemKey,//固定值
          'systemFlag': _this.userInfo.systemFlag,//固定值
          'proInstId': proInstId,
          'gwType': 'cyd'
        })
      }).then(({data}) => {
        if(data.code == 200){
          // this.buttonArr = data.data.buttons
          console.log('button--->' + data.data.buttons);
        }
      })
    },

    //获取签批功能菜单
    async initActivity(){
      const _this = this
      // 获取要显示的按钮
      await this.getButtonsData(_this.proInstId)
      let option01 = _this.paramObject
      let option02 = _this.optionBtn.actInstList[0] //TODO 次处返回了数组格式，需和pc端确认
      // console.log("option02===: " + JSON.stringify(option02));
      await _this.$http({
        url: _this.$http.adornUrl(`/caac/wfm/ApplicationController/initActivity`),
        method: 'post',
        params: _this.$http.adornParams({
          'systemKey': _this.userInfo.systemKey,//固定值
          'systemFlag': _this.userInfo.systemFlag,//固定值
          'data':_this.$http.adornData({
            'configId': option01.configId,//openwfneededdata()返回的configId
            'configCode': option01.configCode,
            'proDirId': option01.proDirId,
            'actDefId': option01.actDefId,
            'wfmRoleTypes': option02.wfmRoleTypes,
            'proInstId': option01.proInstId,
            'actInstId': option01.actInstId,
            'workitemId': option01.workitemId,
            'wfmInitPageType': 'running',
            'bizId': option01.bizId
          }),
        })
      }).then(({data}) => {
        console.log("data---->>: " + JSON.stringify(data));
        if(data.code==200){
          var operations = data.data.qualifiedOperations
          _this.barList = [] //重置为空
          if(operations != null && operations.length>0){
            //TODO 还需判断其他类型的按钮
            for (let i = 0; i < operations.length; i++) {
              // 填写意见
              if(operations[i].operation=='addCirculateReviews'){
                _this.barList.push({
                  name: operations[i].operationName,
                  operation: operations[i].operation,
                  icon: 'static/imgs/icon/icon-opinion.png',
                  iconTab: {
                    active: 'static/imgs/icon/icon-opinion-active.png',
                    inactive: 'static/imgs/icon/icon-opinion.png'
                  },
                  value:operations[i].operationName,
                  sort: 1
                })
              }
              // 已阅
              if(operations[i].operation=='readalready' || operations[i].operation == 'jmsyy'
                  || operations[i].operation == 'review_YiYue_circulate'){
                _this.barList.push({
                  name:operations[i].operationName,
                  operation: operations[i].operation,
                  icon:'static/imgs/icon/icon-agree.png',
                  iconTab:{
                    active: 'static/imgs/icon/icon-agree-active.png',
                    inactive: 'static/imgs/icon/icon-agree.png'
                  },
                  value:operations[i].operationName,
                  sort: 2
                })
              }
              // 传阅
              if(operations[i].operation=='circulate'){
                _this.barList.push({
                  name: operations[i].operationName,
                  operation: operations[i].operation,
                  icon: 'static/imgs/icon/icon-agree.png',
                  iconTab: {
                    active: 'static/imgs/icon/icon-agree-active.png',
                    inactive: 'static/imgs/icon/icon-agree.png'
                  },
                  value:operations[i].operationName,
                  sort: 3
                })
              }
              // 阅毕
              if(operations[i].operation=='readalready'){
                _this.barList.push({
                  name: operations[i].operationName,
                  operation: operations[i].operation,
                  icon: 'static/imgs/icon/icon-finished.png',
                  iconTab: {
                    active: 'static/imgs/icon/icon-finished-active.png',
                    inactive: 'static/imgs/icon/icon-finished.png'
                  },
                  value:operations[i].operationName,
                  sort: 4
                })
              }

            }
            // 功能按钮筛选
            // if(this.util.isNotEmpty(this.buttonArr)){
            //   let newBarList = []
            //   this.buttonArr.filter((b, index) => this.buttonArr.indexOf(b) === index).forEach((item)=>{
            //     let arr = this.barList.filter(t => t.operation == item)
            //     if(arr != null && arr.length > 0) {
            //       newBarList.push(arr[0])
            //     }
            //   })
            //   this.barList = newBarList
            // }else{
            //   this.barList=[]//如果获取到的按钮为空，则置空
            // }
            //大于三个添加更多按钮,第四个按钮为更多操作
            if(_this.barList.length>3){
              _this.barList.sort((a, b) => a.sort - b.sort)
              var more ={
                name:'更多',
                operation:'more',
                icon:'static/imgs/icon/icon-more.png',
                iconTab:{
                  active: 'static/imgs/icon/icon-more-active.png',
                  inactive: 'static/imgs/icon/icon-more.png',
                },
                value:'更多操作',
              }
              _this.barList.splice(3, 0, more);
            }
          }

        }else{
          console.log("出错了: " + JSON.stringify(data));
        }

      })
    },

    toDetail() {
      const _this = this
      if (_this.configCode == 'jbhlc') {
        uni.navigateTo({
          url: "/pages/caac/jnbh/index?proInstId=" + _this.proInstId
        })
      } else if (_this.configCode == 'sj_sw') {
        uni.navigateTo({
          url: "/pages/caac/sjsw/index?proInstId=" + _this.proInstId
        })
      } else if (_this.configCode == 'mhjsd') {
        //跳转收电批办
        uni.navigateTo({
          url: "/pages/caac/receiveMsgApproval/index?proInstId=" + _this.proInstId
        })
      } else if (_this.configCode == 'mhj_sw_zhu') {
        // 跳转收文详情
        uni.navigateTo({
          url: "/pages/caac/receive/index?proInstId=" + _this.proInstId + "&from=db"
        })
      }
    },

    /**
     * 子页面流转后调用此方法刷新功能按钮
     */
    refreshBtnGroup() {
      this.getCirculate(this.proInstId)
      this.getCirculateOpinion(this.proInstId)
      this.showDeleteOpinionBtn()
    },

    // 关闭填写意见
    closeRecords(showRecords) {
      this.showRecords = false
    },

    // 关闭传阅窗口
    closeCy() {
      this.showCy = false
    },

    // 点击tabbar
    onClick(item) {
      this.btnFunction(item)
    },
    // 下边菜单点击功能
    btnFunction(item) {
      // 填写意见
      if (item == 'addCirculateReviews') {
        this.showRecords = true
      }
      // 已阅
      if(item == 'review_YiYue_circulate'){
        this.readGwDialog()
      }
      // 清除意见
      if(item == 'deleteOpinion'){
        this.deleteOpinionConfirm()
      }

      // 传阅
      if (item == 'circulate') {
        this.showCy = true
      }
      // 阅毕
      if (item == 'readalready') {
        this.readalReadyConfirm()
      }
      // 更多操作
      if(item == 'more'){
        this.showShare = true
      }
    },

    // 已阅提示框
    readGwDialog() {
      this.$dialog.confirm({
        confirmButtonColor: '#1989fa',
        title: '系统提示',
        message: '是否确认已阅?',
      }).then(() => {
        this.readGw()//已阅
      }).catch(() => {
        // on cancel
      });
    },

    // 已阅
    readGw() {
      //每次填写意见先查看当前有没有填写过意见,如填写过意见则对已填写意见做更新操作,没有则新增
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/component/approval/queryOpinionByTypeAndApprover`),
        method: 'get',
        params: this.$http.adornParams({
          'proInstId': this.paramObject.proInstId,
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          'opiniontype':'circulateReview',
          'approver': this.cache.get('userInfo').userId
        })
      }).then(({data}) => {
        if(data.code==200){
          if(this.util.isNotEmpty(data.data) && this.util.isNotEmpty(data.data.length > 0)){
            this.cydOpinionId = data.data[0].id
          }else{
            this.cydOpinionId = ''
          }
          //已阅意见
          this.$httploading({
            url: this.$http.adornUrl(`/caac/oa/component/approval/saveopinion`),
            method: 'post',
            params:{
              'systemKey': this.userInfo.systemKey,//固定值
              'systemFlag': this.userInfo.systemFlag,//固定值
            },
            data: this.$http.adornData({
              'proInstId': this.paramObject.proInstId,//发文详情返回的proInstId
              'opiniontype': 'circulateReview',
              'opinion': '已阅',
              'isApproval':'1',
              'id':this.cydOpinionId
            })
          }).then(({data}) => {
            if(data.code==200){
              this.$toast('操作成功')
              this.refreshBtnGroup()
            }else{
              this.$toast(data.message+' code:'+data.code)
            }
          })
        }
      })

    },

    // 阅毕提示
    readalReadyConfirm() {
      this.$dialog.confirm({
        title: '系统提示',
        message: '是否确认操作?',
      }).then(() => {
        // on confirm
        this.readalReady()
      }).catch(() => {
        // on cancel
      });
    },

    // 阅毕
    readalReady() {
      const _this = this
      _this.$httploading({
        url: _this.$httploading.adornUrl(`/caac/oa/component/workflow/circulatecontroller/getmsg`),
        method: 'get',
        params: _this.$httploading.adornParams({
          'systemKey': _this.userInfo.systemKey,
          'systemFlag': _this.userInfo.systemFlag,
          'proInstId': _this.proInstId,
          'receiverId': _this.userInfo.userId
        })
      }).then(({data}) => {
        if(data.code == 200){
          _this.$httploading({
            url: _this.$httploading.adornUrl(`/caac/oa/component/workflow/circulatecontroller/updmsg`),
            method: 'post',
            params: _this.$httploading.adornParams({
              'systemKey': _this.userInfo.systemKey,
              'systemFlag': _this.userInfo.systemFlag,
              'queryParams': this.$httploading.adornData({
                'proInstId': _this.proInstId,
                'receiverId': _this.userInfo.userId,
                'todoId': data.data.id
              })
            })
          }).then(({data}) => {
            if(data.code == 200){
              if(this.from == 'dybdb'){
                uni.navigateTo({
                  url: "/pages/caac/send/signListdb?topShow="+this.from
                })
              }else if (this.from == 'dbwj'){
                uni.navigateTo({
                  url: "/pages/caac/send/signList?topShow="+this.from
                })
              }

            }
          })
        }
      })
    },
    // 已读
    readCirculate(proInstId) {
      const _this = this
      _this.$httploading({
        url: _this.$httploading.adornUrl(`/caac/oa/component/workflow/circulatecontroller/readedcir`),
        method: 'get',
        params: _this.$httploading.adornParams({
          'systemKey': _this.userInfo.systemKey,
          'systemFlag': _this.userInfo.systemFlag,
          'id': proInstId,
        })
      }).then(({data}) => {
        if(data.code == 200){

        }
      })
    },
    //判断是否显示清除意见按钮
    showDeleteOpinionBtn(){
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/component/approval/circulateApprovalwrite`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.userInfo.systemKey,//固定值
          'systemFlag': this.userInfo.systemFlag,//固定值
          'proInstId':this.proInstId
        })
      }).then(({data}) => {
        if (data.code == 200) {
          if (this.util.isNotEmpty(data.data)) {
            if(this.util.isNotEmpty(data.data.circulateReview)){
              data.data.circulateReview.forEach(item=>{
                if(item.approver == this.userInfo.userId){
                  this.opinionId = item.id //要删除的意见id
                  this.barList = this.buttonArr
                }
              })
            }
            if(this.util.isEmpty(this.opinionId)){
              //如果意见为null,则不显示清除意见按钮
              this.barList = this.barList.filter(t => t.operation != 'deleteOpinion')
            }
          }else{
            //如果意见为null,则不显示清除意见按钮
            this.barList = this.barList.filter(t => t.operation != 'deleteOpinion')
          }
        } else {
          console.log(data.message)
        }

      })

    },
    //清除意见
    deleteOpinionConfirm(){
      this.$dialog.confirm({
        title: '系统提示',
        message: '您确定要操作吗?',
      }).then(() => {
        this.deleteOpinion()//删除意见
      }).catch(() => {
      });
    },
    //删除意见
    deleteOpinion() {
      if (this.util.isNotEmpty(this.opinionId)) {
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/component/approval`),
          method: 'delete',
          params: this.$http.adornParams({
            'systemKey': this.userInfo.systemKey,//固定值
            'systemFlag': this.userInfo.systemFlag,//固定值
            'opinionId': this.opinionId
          })
        }).then(({data}) => {
          if (data.code == 200) {
            this.$toast("删除意见成功")
            this.refreshBtnGroup()
          } else {
            this.$toast(data.message)
          }
        })
      }else{
        this.$toast('当前没有可删除的意见!')
      }
    }


  },
}

</script>

<style scoped>
.content {
  padding: 10rpx;
  word-break: break-all;
}

.title {
  display: flex;
  justify-content: center;
  color: #26a826;
  font-weight: 600;
  font-size: 36rpx;
  margin-top: 60rpx;
  margin-bottom: 20rpx;
  letter-spacing: 10rpx;
}

.title span {
  color: #000000;
}

.form-border {
  border: 1px solid #26a826;
  border-bottom: none;
  border-right: none;
}

.form-border-right {
  border-bottom: 1px solid #26a826;
  border-right: 1px solid #26a826;
}

.form-border-bottom {
  border-bottom: 1px solid #26a826;
}

.form-margin {
  margin-left: -0.5px;
  margin-right: -0.5px;
}

.form-row {
  display: flex;
  justify-content: center;
  flex: 1;
}

.form-row label {
  color: #26a826;
  padding: 10rpx;
  text-align: center;
}

.form-row span {
  color: #000000;
  padding: 10rpx;
  text-align: left;
}

.flex-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flex-one {
  flex: 1;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-two {
  flex: 2;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-three {
  flex: 3;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-four {
  flex: 4;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-five {
  flex: 5;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-six {
  flex: 6;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-seven {
  flex: 7;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-eight {
  flex: 8;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-nine {
  flex: 9;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-ten {
  flex: 10;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-eleven {
  flex: 11;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-twelve {
  flex: 12;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-block-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  /* font-family: SimSun; */
}

.font-blue{
  color: #0081ff !important;
}
</style>
